<template>
  <view class="wx-scan-content">
    <view class="scan-cameraCon">
      <camera class="scan-camera" device-position="back" flash="off" @error="error" mode="scanCode"
              @scancode="cameraScan" :style="{ width: scanCameraWid, height: scanCameraHei }">
        <view class="cover-view-box">
          <!-- 左上角 -->
          <cover-view class="scan-border scan-left-top scan-verLine"></cover-view>
          <cover-view class="scan-border scan-left-top scan-horLine"></cover-view>
          <!-- 左下角 -->
          <cover-view class="scan-border scan-left-bottom scan-verLine"></cover-view>
          <cover-view class="scan-border scan-left-bottom scan-horLine"></cover-view>
          <!-- 右上角 -->
          <cover-view class="scan-border scan-right-top scan-verLine"></cover-view>
          <cover-view class="scan-border scan-right-top scan-horLine"></cover-view>
          <!-- 右下角 -->
          <cover-view class="scan-border scan-right-bottom scan-verLine"></cover-view>
          <cover-view class="scan-border scan-right-bottom scan-horLine"></cover-view>
          <!-- 上下移动的动画线 -->
          <cover-view class="scan-animation" :animation="scanAnimation"></cover-view>
        </view>
      </camera>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue'

const props = defineProps({
  scanMode: {
    type: String,
    default: 'scanCode'
  },
  scanTip: {
    type: Number,
    default: 2
  },
  scanCameraWid: {
    type: String,
    default: '250px'
  },
  scanCameraHei: {
    type: String,
    default: '250px'
  }
})

const emit = defineEmits(['getCode'])

const scanAnimation = ref(null)
const scanFlag = ref(true)

let animation = uni.createAnimation({})

const cameraScan = async (e) => {
  if (scanFlag.value) {
    if (!e) {
      showToasts('扫描失败，请稍后再试')
      return
    }
    onScanSuccess(e.detail.result)
  }
}

const onScanSuccess = async (barNumber) => {
  console.log('onScanSuccess======' + barNumber)
  if (scanFlag.value) {
    scanFlag.value = false
    uni.vibrateLong({
      success: () => {
      }
    })
    emit('getCode', barNumber)
    // 扫码间隔3秒
    setTimeout(() => {
      scanFlag.value = true
    }, 3000)
  }
}

/*
 * toast提示
 * @param {string}
 * */
const showToasts = (msg) => {
  uni.showToast({
    title: msg,
    icon: 'none'
  })
}

const initAnimation = () => {
  let m = true
  setInterval(() => {
    if (m) {
      animation.translateY(140).step({
        duration: 3000
      })
      m = !m
    } else {
      animation.translateY(10).step({
        duration: 3000
      })
      m = !m
    }
    scanAnimation.value = animation.export()
  }, 3000)
}

/*
* 摄像头授权设置
* */
const error = (e) => {
  if (e) {
    let that = this;
    uni.getSetting({
      success: res => {
        if (!res.authSetting['scope.camera']) {
          //获取摄像头权限
          uni.authorize({
            scope: 'scope.camera',
            success: () => {
              console.log('授权成功');
            },
            fail: () => {
              uni.showModal({
                title: '提示',
                content: '您已禁止授权应用的相机权限，如需使用请在设置中授权',
                showCancel: false,
                success: () => {
                  openAuthor();
                }
              });
            }
          });
        }
      },
      fail(res) {
      }
    });
  }
}

/*
* 摄像头授权权限
* */
const openAuthor = () => {
  uni.openSetting({
    //这里的方法是调到一个添加权限的页面，可以自己尝试
    success: res => {
      if (!res.authSetting['scope.camera']) {
        uni.showModal({
          title: '提示',
          content: '您已禁止授权应用的相机权限，如需使用请在设置中授权',
          showCancel: false,
          success: (res) => {
            if (res.confirm) {
              openAuthor();
            }
          }
        });
      }
    },
    fail: () => {
      console.log('授权摄像头权限失败');
    }
  });
}

onMounted(() => {
  if (props.scanMode === 'scanCode') {
    initAnimation()
  }
})
</script>

<style lang="scss" scoped>
@import "./lib/index";
</style>
